<template>
    <div class="restContainer">
        <head-top headTitle="我的订单" :searboxShow='false'></head-top>
            <div class="container">
                <a href="javascript:;" v-if="no_order">没有订单信息哟~</a>
                <a v-for="item in orders" data-v-e8380afc="" data-v-08f9d9b7="" href="javascript:" class="ordercard">
                    <div data-v-e8380afc="" class="ordercard-body">
                        <div data-v-e8380afc="" class="ordercard-avatar">
                            <img data-v-e8380afc="" src="https://fuss10.elemecdn.com/d/aa/ca5c84424ac1b929cdb35c745b7b0jpeg.jpeg?imageMogr/format/webp/">
                        </div>
                        <div data-v-e8380afc="" class="ordercard-content">
                            <div data-v-e8380afc="" class="ordercard-head">
                                <div data-v-e8380afc="" class="title">
                                    <p data-v-e8380afc="" class="name">
                                        <span data-v-e8380afc="" class="content">{{item.address}}</span>
                                        <svg data-v-e8380afc="">
                                            <use data-v-e8380afc="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                                        </svg>
                                    </p>
                                    <p data-v-e8380afc="" class="status">订单已完成</p>
                                </div>
                                <p data-v-e8380afc="" class="datetime">2017-07-10 17:34</p>
                            </div>
                            <div data-v-e8380afc="" class="ordercard-detail">
                                <p data-v-e8380afc="" class="detail">
                                    <span data-v-e8380afc="" class="productname ellipsis">
                                    {{item.recipient}}
                                    </span>
                                    <span data-v-e8380afc="">等7件商品</span>
                                </p>
                                <p data-v-e8380afc="" class="price">¥23.00</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        <footer-box index="2"></footer-box>
    </div>
</template>

<script>
    import main_head from 'components/header/main_head';
    // import alertTip from 'components/errorTip/errorTip';
    import footer from 'components/footer/footer';
    import {getCookie} from '../../assets/js/cookie.js'
    export default {
        data(){
            return {
                no_order:false,
                orders:[],
                user_id:'',
                url:'getorderdetail',//获取订单接口
                detailUrl:'queryOrderByOid',//查询订单详细
                oid:'',
            }
        },
        created(){
            this.getOrder();
        },
        components: {
            'head-top': main_head,
            'footer-box':footer
        },
        methods: {
            //获取订单信息
            getOrder(){
                this.user_id = getCookie("user_id");
                var data = {
                    'id':this.user_id
                };
                let myurl = publicDom.base_url+this.url;
                this.$http.post(myurl,data,{emulateJSON:true}).then((res) =>{
                    let list = res.data;
                    console.log(data);
                    if (list.code == 200) {
                        this.orders = list.list;
                        for (var i = 0; i < list.list.length; i++) {
                            this.oid = list.list[i].id;
                            this.getDetail();
                        }
                        // this.showAlert = true;
                        // this.alertText = '密码修改成功!';
                        // setTimeout(function(){
                        //       this.showAlert = false;
                        //       this.$router.push('/login');
                        //   }.bind(this),500);
                    }
                    else {
                        this.no_order = true;
                        // this.showAlert = true;
                        // this.alertText = list.msg;
                    }
                })
            },
            getDetail(){
                let detail = publicDom.base_url+this.detailUrl;
                this.$http.post(detail,{'id':this.oid},{emulateJSON:true}).then((res) =>{
                    let list = res.data;
                    if (list.code == 200) {
                        // this.orders = list.list;
                        this.orders.detail = list.list;
                        console.log(this.orders);
                        // this.showAlert = true;
                        // this.alertText = '密码修改成功!';
                        // setTimeout(function(){
                        //       this.showAlert = false;
                        //       this.$router.push('/login');
                        //   }.bind(this),500);
                    }
                    else {
                        this.no_order = true;
                        // this.showAlert = true;
                        // this.alertText = list.msg;
                    }
                })
            }
        },
        watch: {
            '$route':'getOrder'
        }
    }


</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixin.styl"
    .ordercard[data-v-e8380afc] {
    display: block;
    margin-top: .266667rem;
    background-color: #fff;
    padding: .7rem 0 0 .6rem;
}
.ordercard .ordercard-body[data-v-e8380afc], .ordercard .ordercard-bottom[data-v-e8380afc] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.ordercard .ordercard-avatar[data-v-e8380afc] {
    padding-right: .266667rem;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}
.ordercard .ordercard-avatar img[data-v-e8380afc] {
    border-radius: .053333rem;
    border: 1px solid #eee;
    width: 1.7rem;
    height: 1.7rem;
}
.ordercard .ordercard-content[data-v-e8380afc] {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    width: 0;
}
.ordercard .ordercard-head[data-v-e8380afc] {
    border-bottom: 1px solid #eee;
    padding-right: .346667rem;
    padding-bottom: .266667rem;
}
.ordercard .ordercard-head .name[data-v-e8380afc], .ordercard .ordercard-head .title[data-v-e8380afc] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.ordercard .ordercard-head .title[data-v-e8380afc] {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.ordercard .ordercard-head .name[data-v-e8380afc] {
    font-size: .7rem;
    line-height: 1.5em;
    color: #333;
}
.ordercard .ordercard-head .name[data-v-e8380afc], .ordercard .ordercard-head .title[data-v-e8380afc] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.ordercard .ordercard-head .name .content[data-v-e8380afc] {
    display: inline-block;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ordercard .ordercard-head .name[data-v-e8380afc] {
    font-size: .7rem;
    line-height: 1.5em;
    color: #333;
}
.ordercard .ordercard-head .name svg[data-v-e8380afc] {
    margin-left: .133333rem;
    width: .133333rem;
    height: .186667rem;
}
.ordercard .ordercard-head .status[data-v-e8380afc] {
    font-size: .6rem;
    text-align: right;
    color: #333;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ordercard .ordercard-head .datetime[data-v-e8380afc] {
    font-size: .43rem;
    color: #999;
}
.ordercard .ordercard-detail[data-v-e8380afc] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .4rem .346667rem .4rem 0;
}
.ordercard .ordercard-detail .detail[data-v-e8380afc] {
    font-size: .6rem;
    color: #666;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.ordercard .ordercard-detail .productname.ellipsis[data-v-e8380afc] {
    max-width: 4.266667rem;
}
.ordercard .ordercard-detail .productname[data-v-e8380afc] {
    display: inline-block;
    max-width: 6.133333rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ordercard .ordercard-detail .price[data-v-e8380afc] {
    -webkit-flex-basis: 1.6rem;
    -ms-flex-preferred-size: 1.6rem;
    flex-basis: 1.6rem;
    text-align: right;
    font-size: .6rem;
    color: #333;
    font-weight: 700;
}
.container{
    margin-bottom:2.1rem;
}
</style>
